<template>
  <div class="default-box">

    <NewCard 
      title="爬虫失败" 
      :border="false"
      :isright="true"
      :style="{ 'margin-bottom': padding }">
      <div class="row-box">
        <div class="ComSelect">
          <!-- <ComSelect @EventChange="selectStatus" :options="options"></ComSelect> -->
        </div>
      </div>
      <template #right>
        <ComForm
          @EventDatePicker="EventDatePicker"
          @EventReset="reset"
          @EventOnsubmit="inquireFn"
          :list="comForm"
        ></ComForm>
      </template>

      <div class="table">
        <ComTable
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @eventAdd="Add"
          :config="config"
          :pagination="{
            total: pageing.total,
            pageNum: pageing.pageNum,
            pageSize: pageing.pageSize,
          }"
          :list="tableList"
          :modes="tableModes"
        >
          <el-table-column label="操作" width="100" align="left">
            <template>
              <div class="edit-box">
                <span> 整理 </span>
              </div>
            </template>
          </el-table-column>
        </ComTable>
      </div>
    </NewCard>

    <el-dialog
      @close="close"
      title="查看"
      :visible="lookDialogVisible"
      width="700px"
    >
      <el-form
        :model="lookform"
        ref="form"
        label-width="114px"
        class="demo-form"
      >
        <el-form-item label="内容密级" prop="secretLevel">
          <el-radio-group disabled v-model="lookform.secretLevel">
            <el-radio label="A">A级</el-radio>
            <el-radio label="B">B级</el-radio>
            <el-radio label="C">C级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-input disabled v-model="lookform.source"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input disabled v-model="lookform.type"></el-input>
        </el-form-item>
        <el-form-item v-if="isSmallLaw" label="法规小分类" prop="lawType">
          <el-select
            disabled
            placeholder="请选择小分类"
            v-model="lookform.lawType"
          >
            <el-option
              v-for="item in lawType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="URl" prop="url">
          <el-input
            disabled
            v-model="lookform.url"
            placeholder="请输入网址"
          ></el-input>
        </el-form-item>
        <el-form-item label="爬取标签" prop="labelList">
          <!-- <div
            v-if="lookform.labelList && lookform.labelList.length == 0"
            class="tag-box"
          >
            <el-tag class="tag" v-for="tag in lookform.labelList" :key="tag.id">
              {{ tag.content }}
            </el-tag>
          </div>
          <span v-else>无</span> -->
          <el-input
            disabled
            v-model.number="lookform.label"
            placeholder="无"
          ></el-input>
        </el-form-item>
        <el-form-item label="总条数" prop="sum">
          <el-input
            disabled
            v-model.number="lookform.sum"
            placeholder="请输入总条数"
          ></el-input>
        </el-form-item>
        <el-form-item label="执行周期(min)" prop="cycle">
          <el-input
            disabled
            v-model.number="lookform.cycle"
            placeholder="请输入执行周期"
          ></el-input>
        </el-form-item>

        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker disabled v-model="lookform.createTime" type="date">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";

import ComForm from "../../../components/comForm.vue";
import { getCrawlerListApi } from "@/wss/newApi_3-24/work/crawler.js";
import { getCrawlerFailListApi } from "@/wss/newApi_3-24/work/crawlerFail.js";
import ComTable from "../../../components/comTable.vue";
import { getfilterParams } from "@/wss/utils/wss.js";
import Add from "./add.vue";
import { changeType, changeLawType } from "@/wss/utils/wss.js";
import ComSelect from "../../../components/comSelect.vue";
import NewCard from "../../../components/newCard.vue";

export default {
  components: { ComForm, ComTable, Add, ComSelect, NewCard },
  data() {
    return {
      // 边距
      padding: padding,

      // 是否有小分类
      isSmallLaw: false,
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "1",
            label: "正常",
          },
          {
            value: "2",
            label: "失败",
          },
        ],
      },
      lookform: {},
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选
      // 保存切换失败和正常筛选的数组
      tempFilterArr: [],
      // 类型数组
      typeArr: [],
      dialogVisible: false,
      // 是否再次过滤筛选条件
      isFilter: true,
      // 表格配置
      config: {
        loading: true,
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      // 失败和成功状态
      currentStatus: "1",
      // 运行中的数量
      operation: 0,
      activeName: "first",

      // 没有转换过的数据
      noChangeTableList: [],
      // 表单配置
      comForm: {
        modes: [
          {
            formType: "input",
            mode: "domain",

            value: "",
            select: this.tempFilterArr,
            placeholder: "请输入来源",
          },
          {
            formType: "select",
            mode: "type",

            placeholder: "请选择类型",

            value: "",
            select: this.tempFilterArr,
          },
        ],
      },

      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          label: "来源",
          mode: "domain",
          width: 100,
        },
        {
          label: "类型",
          mode: "type",
          width: 100,
        },
        {
          label: "法规小分类",
          mode: "lawType",
          width: 100,
        },

        {
          label: "标题",
          mode: "title",

          showOverflowTooltip: true,
        },

        // {
        //   url: true,

        //   label: "URL",
        //   mode: "url",
        //   width: 400,
        //   showOverflowTooltip: true,
        // },
        // {
        //   label: "创建时间",
        //   mode: "createTime",
        //   width: 220,
        //   showOverflowTooltip: true,
        // },
        // {
        //   width: 200,
        //   label: "失败原因",
        //   mode: "errorMsg",
        // },
      ],
    };
  },
  mounted() {
    this.getCrawlerFailListFn();
  },
  methods: {
    close() {
      this.lookDialogVisible = false;
    },
    // 查看
    look(row) {
      this.lookDialogVisible = true;

      this.lookform = row;
    },
    // 数字清空
    EventDatePicker(e) {
      console.log(e);
    },
    // 当前页发生改变时
    handleCurrentChange(num) {
      const _this = this;
      _this.pageing.pageNum = num;
      _this.getCrawlerFailListFn();
    },

    Add() {
      this.dialogVisible = true;
    },
    // 修改
    edit(row) {
      // let currentRow = this.noChangeTableList.find((item) => item.id == row.id);
      let currentRow = JSON.parse(JSON.stringify(row));

      this.$refs.addDialog.echo(currentRow);

      this.dialogVisible = true;
    },
    // 重设
    reset() {
      const pageing = this.pageing;
      this.pageing = {
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
        total: pageing.total,
      };
    },
    handleSizeChange(size) {
      const _this = this;
      _this.pageing.pageSize = size;
      _this.getCrawlerFailListFn();
    },

    // 查询参数
    inquireFn(params) {
      const _this = this,
        pageing = _this.pageing;

      params.forEach((item) => {
        for (const key in item) {
          pageing[key] = item[key];
          if (item.add && item.add instanceof Array) {
            pageing.beginTime = item.add[0];
            pageing.endTime = item.add[1];
            pageing.add = null;
          } else if (item.update && item.update instanceof Array) {
            pageing.lastBeginTime = item.update[0];
            pageing.lastEndTime = item.update[1];
            pageing.update = null;
          }
        }
      });
      // 重新设置参数
      pageing.pageNum = 1;
      _this.pageing = pageing;

      _this.getCrawlerFailListFn();
    },
    // 添加筛选条件
    getfilterParamsFn(tableList) {
      let arr = getfilterParams(tableList);
      this.typeArr = arr;
      this.comForm.modes.forEach((item) => {
        if (item.mode == "type") {
          item.select = arr;
        }
      });
      this.tempFilterArr = arr;
      this.isFilter = false;
    },
    // 获取爬虫列表
    async getCrawlerListFn() {
      const _this = this;
      let tableList = [];
      _this.config.loading = true;

      let { code, rows, total } = await getCrawlerListApi(this.pageing);
      if (code == 200) {
        tableList = JSON.parse(JSON.stringify(rows));
        // 没有转换
        _this.noChangeTableList = JSON.parse(JSON.stringify(rows));
        _this.pageing.total = total;
        // 总条数；当前条数
        let current = 0,
          sum = 0;
        let operation = 0;
        let length;
        tableList.forEach((item) => {
          item.type = changeType(item.type);
          current += parseFloat(item.current);
          sum += parseFloat(item.sum);
          if (item.lawType) {
            item.lawType = changeLawType(item.lawType);
          }

          // item.status = item.status == 0 ? "运行" : "停止";
          item.label = "";
          length = item.labelList.length;
          item.labelList.forEach((v, index) => {
            if (length == index + 1) {
              item.label += v.content;
            } else {
              item.label += v.content + ",";
            }
          });
        });

        _this.tableList = tableList;

        // 添加筛选条件
        if (_this.isFilter) {
          _this.getfilterParamsFn(_this.noChangeTableList);
        }
        _this.current = current;
        _this.sum = sum;
        _this.operation = operation;
        _this.config.loading = false;
      }
    },
    //获取爬虫失败记录
    async getCrawlerFailListFn() {
      const _this = this;
      _this.config.loading = true;

      let { code, rows, total } = await getCrawlerFailListApi(this.pageing);
      // 没有改变的行数据
      _this.noChangeTableList = JSON.parse(JSON.stringify(rows));
      rows.forEach((item) => {
        item.type = changeType(item.type);
        item.lawType = changeLawType(item.lawType);
      });
      if (code == 200) {
        // 只有再切换时才重设，搜索时不用过滤
        if (this.isFailtrueFilter) {
        }
        this.isFailtrueFilter = false;
        _this.tableList = rows;
      }
      // console.log();
      if (_this.isFilter) {
        _this.getfilterParamsFn(_this.noChangeTableList);
      }

      _this.config.loading = false;
      _this.pageing.total = total;
    },
    // 选择状态
    async selectStatus(status) {
      this.isFailtrueFilter = true;
      await _this.getCrawlerFailListFn();
      _this.config.isAdd = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.default-box{
  padding: 0;
  height: 90%;
}
::v-deep .el-card__body{
  height: 100%;
}
::v-deep .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body>div::-webkit-scrollbar{
  width: 0;
}
.tab {
  color: #f97f2a;
  padding-left: 20px;
  background-color: #ffffff;
  height: 80px;
  line-height: 80px;
  margin-bottom: 20px;
}

.table {
  background-color: #ffffff;

  padding-top: 0px;
}
.title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
}
.select {
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  margin-left: -10px;
  margin-bottom: 20px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #f2f2f2;
  .select-item {
    background: #ffffff;
    margin-right: 20px;
    // margin-left: 10px;
    color: #333333;
    width: 243px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 4px;
    font-weight: 700;
    border: 1px solid #b7b7b7;
  }
}
.ComSelect {
  // padding-left: 42px;
  // margin-bottom: 20px;
}
.row-box {
  background-color: #ffffff;

  .row {
    padding-left: 10px;

    width: 100%;
    box-sizing: border-box;

    // height: 100px;
    min-height: 70px;
    justify-content: flex-start;
    .col {
      display: flex;
    }
    .currentStatusClass {
      color: #1890ff;
      border: 1px solid #1890ff;
    }
  }
}
.edit-box {
  display: flex;
  color: #1890ff;
  align-items: center;

  .line {
    display: inline-block;
    width: 1px;
    height: 15px;
    background-color: #8fa8e1;
  }
}

// ::v-deep .el-tabs__item:hover {
//   color: #f97f2a;
// }
</style>